<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        p{
            margin: 0;
        }
        .shop-car{
            width: 800px;
            margin: 0 auto;
        }
        .item{
            display: flex;
            box-sizing: border-box;
            box-shadow: 0 0 2px 0;
            padding-top: 15px;
            padding-left: 15px;
            padding-bottom: 15px;
            background-color: whitesmoke;
        }
        .item img{
            width: 70px;
            height: 70px;
        }
        .item .name{
            display: flex;
            flex-direction: column;
        }
        .item .name span,.item .spec,.item .count{
            font-size: 12px;
            color: grey;
        }
        .item .price,.sub-total,.total span{
            color: red;
        }
        .item p{
            width: 101px;
        }
        .item .name{
            width: 200px;
            margin-left: 2px;
        }
        .item .spec{
            width: 200px;
        }
        .total{
            text-align: end;
            margin-right: 55px;
        }
    </style>
</head>
<body>
    <div class="shop-car">
        <div class="list">
            <div class="item">
                <img src="./images/1.jpg" alt="">
                <p class="name">手摇咖啡机gfdg<span>【赠品】阿飞his</span> </p>
                <p class="spec">白色/20寸</p>
                <p class="price">￥123</p>
                <p class="count">x3</p>
                <p class="sub-total">￥579.80</p>
            </div>
        </div>
        <div class="total"> 合计：<span>￥579</span></div>
    </div>
    <script>
        const goodsList=[
            {
                id: '40001',
                name: '精品茶具套装',
                price: 289.8,
                picture: './images/1.jpg',
                count: 2,
                spec: {color: '浅绿色'}
            },
            {
                id: '40002',
                name: '茶具礼盒套装',
                price: 154.89,
                picture: './images/2.jpg',
                count: 1,
                spec: {color: '青色'}
            },
            {
                id: '40003',
                name: '手工制作茶壶',
                price: 89.3,
                picture: './images/3.jpg',
                count: 2,
                spec: {size: '5寸',color: '青绿色'}
            },
            {
                id: '40004',
                name: '碗户套装',
                price: 16.75,
                picture: './images/4.jpg',
                count: 3,
                spec: {size: '15寸',color: '青绿色'},
                gift: '50g茶叶,清洗球'
            },
            {
                id: '40004',
                name: '碗户套装',
                price: 16.75,
                picture: './images/4.jpg',
                count: 3,
                spec: {size: '15寸',color: '青绿色'},
                gift: '50g茶叶,清洗球'
            },
            {
                id: '40004',
                name: '碗户套装',
                price: 16.75,
                picture: './images/4.jpg',
                count: 3,
                spec: {size: '15寸',color: '青绿色'},
                gift: '50g茶叶,清洗球'
            },
        ]

        // 处理数据
        const str=goodsList.map(item=>{
            // 对象解构
            const {name,price,picture,count,spec,gift}=item
            // 规格处理
            const text=Object.values(spec).join('/')
            // 计算小计价格
            const subTotal=((price*100*count)/100).toFixed(2)
            // 处理赠品
            const str=gift?gift.split(',').map(item=>`<span>【赠品】${item}</span>`).join(''):''
            return `
            <div class="item">
                <img src="${picture}" alt="">
                <p class="name">${name}${str} </p>
                <p class="spec">${text}</p>
                <p class="price">￥${price.toFixed(2)}</p>
                <p class="count">x${count}</p>
                <p class="sub-total">￥${subTotal}</p>
            </div>`
        }).join(' ')
        // 根据数据渲染页面
        document.querySelector('.list').innerHTML=str
        // 总价模块
        const total=goodsList.reduce((prev,item)=>prev+(item.price*100*item.count)/100,0)
        document.querySelector('.total span').innerHTML='￥'+total.toFixed(2)
    </script>
</body>
</html>